<template>
  <div class="leave">
    <div class="title">
      <span>请假申请</span>
      <i class="el-icon-star-on"></i>
      <i class="el-icon-scissors"></i>
      <i class="el-icon-more"></i>
    </div>
    <div class="sub-title">
      <el-button @click="drawer = true" type="primary" class="button">
        发起新的
      </el-button>
      <el-upload
        class="upload"
        action="/api/leave/import"
        :headers="headers"
        :data="{ userid: userinfo._id }"
        name="excel"
        :show-file-list="false"
        :on-success="onSuccess"
      >
        <el-button class="button" size="small">导入</el-button>
      </el-upload>

      <el-menu
        :default-active="activeIndex + ''"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1">待办事项</el-menu-item>
        <el-menu-item index="2">已办事项</el-menu-item>
        <el-menu-item index="3">抄送事项</el-menu-item>
        <el-menu-item index="4">我发起的</el-menu-item>
        <el-menu-item index="5">全部数据</el-menu-item>
        <el-menu-item index="6">概览</el-menu-item>
        <el-menu-item index="7">统计报表</el-menu-item>
      </el-menu>
    </div>
    <div class="main">
      <div class="table-title">
        <div>
          <i class="el-icon-s-unfold"></i>
          <span
            ><el-link :href="'/api/leave/download?userid=' + userinfo._id"
              >导出</el-link
            ></span
          >
        </div>
        <div>
          <i class="el-icon-s-tools"></i>
          <span>字段管理</span>
        </div>
        <div>
          <i class="el-icon-menu"></i>
          <span>精简视图</span>
        </div>
        <div>
          <i class="el-icon-search"></i>
          <span>搜索</span>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="_id"
          label="编号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          :formatter="formater_status"
          label="当前流程状态"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="name" label="申请人" width="90">
        </el-table-column>
        <el-table-column prop="reason" label="请假是由" width="180">
        </el-table-column>
        <el-table-column
          prop="starttime"
          :formatter="formatterTime"
          label="开始日期"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="endtime"
          :formatter="formatterTime"
          label="结束日期"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="days" label="请假总天数" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- scope.row 当前行的 数据对象 -->
            <!-- scope.$index 当前行的 数据对象的索引 -->
            <el-button
              @click.native.prevent="deleteRow(scope.row._id)"
              type="danger"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 抽屉 -->
    <el-drawer title="请假申请" :visible.sync="drawer" modal size="50%">
      <div class="shadow"></div>
      <div class="form-title">请假申请</div>
      <!-- 主要区域 -->
      <div class="form-main">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="form-box"
        >
          <p>个人信息</p>
          <el-form-item label="申请人" prop="name">
            <el-input
              type="text"
              v-model="ruleForm.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="请假事由" prop="reason">
            <el-input
              type="textarea"
              placeholder="填写请假事由"
              v-model="ruleForm.reason"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <div class="flex">
            <el-form-item label="开始时间" prop="starttime">
              <el-date-picker
                @blur="this.getday"
                v-model="ruleForm.starttime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endtime">
              <el-date-picker
                @blur="this.getday"
                v-model="ruleForm.endtime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <el-form-item label="请假天数" prop="days">
            <el-input
              type="num"
              v-model="ruleForm.days"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 底部区域 -->
      <div class="form-bottom">
        <el-button class="buttton" type="primary" @click="submitForm"
          >提交</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { leave_list, leave_add, leave_delete } from "../../utils/api";
import { mapState } from "vuex";
export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value.length < 2) {
        callback(new Error("请输入正确的姓名"));
      } else {
        callback();
      }
    };
    var validateReason = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入出差事由"));
      } else {
        callback();
      }
    };
    var validateValue1 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请选择开始日期"));
      } else {
        callback();
      }
    };
    var validateValue2 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请选择结束日期"));
      } else {
        callback();
      }
    };
    var validateDay = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请选择开始和结束日期"));
      } else {
        callback();
      }
    };
    return {
      headers: { Authorization: "Bearer " + localStorage.getItem("token") },
      multipleSelection: [],
      page: 1,
      total: 0,
      drawer: false,
      activeIndex: 1,
      tableData: [],
      ruleForm: {
        userid: this.$store.state.userinfo._id,
        name: this.$store.state.userinfo.name,
        reason: "",
        starttime: "",
        endtime: "",
        days: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        reason: [{ validator: validateReason, trigger: "blur" }],
        starttime: [{ validator: validateValue1, trigger: "blur" }],
        endtime: [{ validator: validateValue2, trigger: "blur" }],
        days: [{ validator: validateDay, trigger: "blur" }],
      },
    };
  },
  mounted() {
    leave_list({ userid: this.userinfo._id, page: 1 }).then((res) => {
      this.tableData = res.data.list;
      this.total = res.data.total;
    });
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          leave_add(this.ruleForm).then((res) => {
            if (res.data.code == 200) {
              this.$message({ message: res.data.msg, type: "success" });
              this.tableData = res.data.list;
              this.total = res.data.total;
            } else {
              this.$message({ message: res.data.msg, type: "error" });
            }
          });
        } else {
          this.$message({ message: "请按要求填写信息", type: "error" });
        }
      });
    },
    getday() {
      if (this.ruleForm.starttime != "" && this.ruleForm.endtime != "") {
        let start = new Date(this.ruleForm.starttime);
        let end = new Date(this.ruleForm.endtime);
        let time = (end - start) / 1000 / 60 / 60 / 24;
        if (time >= 0) {
          this.ruleForm.days = time + 1;
        } else {
          this.ruleForm.days = "";
        }
      }
    },
    handleSelectionChange(val) {
      //全选相关
      this.multipleSelection = val;
    },
    formater_status(row, column, cellValue, index) {
      return cellValue == 0 ? "待审批" : "已通过";
    },
    formater_num(num) {
      return num < 10 ? "0" + num : num;
    },
    formatterTime(row, column, cellValue, index) {
      let day = new Date(cellValue);
      return `${day.getFullYear()}-${this.formater_num(
        day.getMonth() + 1
      )}-${this.formater_num(day.getDate())}`;
    },
    deleteRow(id) {
      //删除对应id的 出差申请
      leave_delete({ userid: this.userinfo._id, id, page: this.page }).then(
        (res) => {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      );
    },
    handleCurrentChange(val) {
      this.page = val; //保存页码
      //请求对应页码的数据
      leave_list({ userid: this.userinfo._id, page: val }).then((res) => {
        this.tableData = res.data.list;
      });
    },
    onSuccess(res) {
      if (res.code == 200) {
        this.$message.success(res.msg);
        this.tableData.push(...res.list);
        this.tableData = this.tableData.slice(0, 10);
        this.total += res.total;
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>

<style lang='scss'>
.leave {
  .title {
    line-height: 79px;
    padding-left: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    span {
      color: #333;
      margin-right: 10px;
    }
    .el-icon-star-on {
      font-size: 20px;
      color: orange;
      margin-right: 10px;
    }
    .el-icon-scissors {
      color: #ccc;
      margin-right: 10px;
    }
    .el-icon-more {
      color: #ccc;
      margin-right: 30px;
    }
  }
  .sub-title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    .el-menu.el-menu--horizontal {
      border: 0;
      .el-menu-item.is-active {
        border-bottom: 2px solid orange;
        font-weight: 600;
      }
    }
    .button {
      line-height: normal;
      padding: 9px 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      margin: 0 10px;
      background-color: orange;
      color: white;
    }
  }
  .main {
    margin: 10px 20px;
    border: 1px solid #e6e6e6;
    .table-title {
      padding: 12px 0;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      font-size: 14px;
      color: #909399;
      div {
        border-left: 1px solid #e6e6e6;
        padding: 0 10px;
        cursor: pointer;
        i {
          margin-right: 10px;
        }
        a {
          vertical-align: bottom;
          color: inherit;
        }
      }
    }
  }
  // 弹出层
  .el-drawer__container {
    background-color: rgba($color: #000000, $alpha: 0.4);
  }
  .el-drawer__header {
    span {
      font-weight: 600;
    }
  }
  .el-drawer__body {
    background-color: #f9fafc;
    position: relative;
    display: flex;
    flex-direction: column;
    .shadow {
      top: 0;
      left: 0;
      width: 100%;
      height: 0;
      position: absolute;
      box-shadow: 0 0 5px 2px #e6e6e6;
    }
    .form-title {
      height: 10%;
      width: 90%;
      margin: auto;
      font-size: 20px;
      font-weight: 600;
      background: #fff;
      box-shadow: 0 0 5px 2px #e6e6e6;
      display: flex;
      align-items: center;
      padding-left: 15px;
      border-radius: 0 0 10px 10px;
      margin-bottom: 10px;
    }
    .form-main {
      flex: 1;
      width: 90%;
      margin: 0 auto;
      background: #fff;
      box-shadow: 0 0 5px 2px #e6e6e6;
      border-radius: 10px;
      padding: 15px;
      font-size: 14px;
      p {
        margin-bottom: 20px;
        font-weight: 600;
        color: #333;
      }
      .form-box {
        .flex {
          display: flex;
          justify-content: space-between;
          .el-date-editor.el-input {
            width: 300px;
          }
        }
      }
    }
    .form-bottom {
      height: 10%;
      width: 90%;
      margin: auto;
      background: #fff;
      box-shadow: 0 0 5px 2px #e6e6e6;
      margin-top: 10px;
      border-radius: 10px 10px 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        background-color: orange;
        border: 0;
      }
    }
  }
}
</style>